<template>
  <view class="flex-col page">
    <view class="flex-col group_1">
      <view class="flex-col list">
        <view class="flex-col list-item" :key="i" v-for="(item, i) in list">
          <view class="justify-between">
            <text class="text_1">{{item.materialInformationName}}</text>
            <text class="text_3">{{item.materialInformationTime}}</text>
          </view>
          <text class="text_5">{{item.materialName}}</text>
          <text class="text_7">最晚下单时间：{{item.informationTime}}</text>
          <view class="justify-between group_3">
            <view class="group_4">
              <text class="text_9">{{item.address}}</text>
              <text class="text_11">I</text>
              <text class="text_13">{{item.roomArea}}m²</text>
              <text class="text_15">I</text>
              <text class="text_17">{{item.roomTypeName}}</text>
            </view>
            <text class="text_19" @click="del(item.materialInformationId,i)">删除</text>
          </view>
        </view>
      </view>
      <view class="flex-col items-end section_5" @click="empty">
        <view class="flex-col items-center text-wrapper"><text class="text_41">清空消息</text></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        list: [],
      };
    },
	created() {
	  this.getList();	
	},
    methods: {
		getList()
		{
			this.$http('message.infolist').then(r=>{
		          if(r.code==200)
				  {
					  this.list=r.data;
				  }
			});
		},
		empty()
		{
		  
		  			uni.showModal({
		  					title: '提示',
		  					// 提示文字
		  					content: '确认清空信息吗？',
		  					// 取消按钮的文字自定义
		  					cancelText: "取消",
		  					// 确认按钮的文字自定义
		  					confirmText: "删除",
		  					//删除字体的颜色
		  					confirmColor:'red',
		  					//取消字体的颜色
		  					cancelColor:'#000000',
		  					success: res=> {
		  					if (res.confirm) {
		  						this.$http('message.empty').then(r=>{
		  						   if(r.code==200)
		  						   {
		  							   this.list=[];
		  						   }
		  						});
		  					}else {
		  						// 执行取消后的操作
		  					}
		  				}
		  			
		  		
		  })
		},
		del(id,i)
		{
			uni.showModal({
								title: '提示',
								// 提示文字
								content: '确认删除该条信息吗？',
								// 取消按钮的文字自定义
								cancelText: "取消",
								// 确认按钮的文字自定义
								confirmText: "删除",
								//删除字体的颜色
								confirmColor:'red',
								//取消字体的颜色
								cancelColor:'#000000',
								success: res=> {
								if (res.confirm) {
									this.$http('linfomation.deleteList',{
										materialInformationId:id
									}).then(r=>{
									   if(r.code==200)
									   {
										   this.list.splice(i,1);
									   }
									});
								}else {
									// 执行取消后的操作
								}
							}
						
					
			})
			;
		}
	},
  };
</script>

<style scoped lang="scss">
  .list-item {
    padding: 29rpx 22rpx 0 24rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
  .text_5 {
    margin-top: 30rpx;
    align-self: flex-start;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_7 {
    margin-top: 29rpx;
    align-self: flex-start;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .group_3 {
    margin-top: 26rpx;
    padding: 22rpx 0 39rpx;
    border-top: solid 1rpx #eeeeee;
  }
  .text_1 {
    color: #333333;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .text_3 {
    margin-top: 12rpx;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_4 {
    line-height: 28rpx;
    height: 28rpx;
  }
  .text_19 {
    color: #ff371d;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_9 {
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_11 {
    color: #bfbfbf;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_13 {
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_15 {
    color: #bfbfbf;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_17 {
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .page {
    background-color: #f6f7f9ff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group_1 {
    padding-top: 15rpx;
    flex: 1 1 auto;
    overflow-y: auto;
	padding-bottom: 120rpx;
  }
  .list {
    padding: 0 24rpx;
  }
  .section_5 {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
    margin-top: 116rpx;
    padding: 20rpx 0;
    background-color: #ffffff;
    box-shadow: 0px -2rpx 4rpx 0px #00000014;
  }
  .list-item:not(:first-of-type) {
    margin-top: 20rpx;
  }
  .text-wrapper {
    margin-right: 32rpx;
    padding: 9rpx 0 19rpx;
    background-color: #1d6aff14;
    border-radius: 28rpx;
    width: 148rpx;
  }
  .text_41 {
    color: #1d6aff;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
</style>